<template>
  <div class="page class-plain">
    <el-form :model="searchForm" label-position="left" inline label-suffix="：" size="small">
      <div class="flex wap flex-start">
        <el-form-item label="老师">
          <check-emp :itemId="searchForm.empid" @checkedItem="searchCheckedEmp" :defFirst="true" />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="getData">查询</el-button>
        </el-form-item>
      </div>
    </el-form>
    <div class="classTab">
      <el-card class="box-card" v-for="(e,i) in tableData" :key="i" :body-style="cardBody">
        <div slot="header" class="flex flex-between">
          <span>{{e.weekdayname}}</span>
          <i class="el-icon-circle-plus-outline" @click="addData(e.weekday)"></i>
        </div>
        <div class="flex flex-between col font16 item-box" v-for="(item, l) in e.empClassList" :key="l">
          <span>{{item.starttime+'~'+item.endtime}}</span>
          <span style="padding:10px 0">{{'【'+item.classname+'】'}}</span>
          <div class="del-bg"></div>
          <div class="del-icon"><i class="el-icon-close font16"  @click="classdel(item.classid)"></i></div>
          <div class="flex flex-arround">
            <el-button type="warning" size="mini" plain @click.stop="changeStu(item)">调整</el-button>
            <el-button type="success" size="mini" plain @click.stop="lookInfo(item)">详情</el-button>
            <el-button type="primary" size="mini" plain @click.stop="sendMsg(item)">短信通知</el-button>
          </div>
          <div class="himg-box" v-if="item.stuClassList&&item.stuClassList.length>0">
            <div v-for='(el,i) in item.stuClassList' :key="i" style="padding:10px 5px 0 5px">
              <el-tag type="info" size="mini" effect="plain">{{el.stuname}}</el-tag>
              <!-- <el-avatar :src="$Url + '/upload/' + el.headimg"></el-avatar> -->
            </div>
          </div>
          <!-- <el-divider></el-divider> -->
        </div>
        <!-- <el-collapse v-model="activeNames" accordion>
          <el-collapse-item :name="item.classid" v-for="(item, l) in e.empClassList" :key="l">
            <template slot="title">
              <div class="flex flex-between col font16">
                <span>{{item.starttime+'~'+item.endtime+'【'+item.classname+'】'}}</span>

                <i class="el-icon-refresh" @click.stop="changeStu(item)"></i>
              </div>
            </template>
            <div v-for="(stu, n) in item.stuClassList" :key="n" class="flex flex-between" style="width:96%">
              <div class="flex flex-between">
                <el-avatar size="medium" :src="$Url + '/upload/' + stu.headimg"></el-avatar>
                <div style="padding:6px 0 0 10px;font-size:16px">{{stu.stuname}} {{stu.phone}}</div>
              </div>
              <i class="el-icon-finished color-r font18 point" @click="sing(stu)"></i>
            </div>

          </el-collapse-item>
        </el-collapse> -->
      </el-card>
    </div>
    <el-dialog title="创建班级" center :visible.sync="addClassVisible" width="40%">
      <el-form :model="lessionForm" ref="addLessionRef" :rules="rule" label-width="100px" class="edit-form"
        label-suffix="：">
        <el-form-item label="星期" prop="weekday">
          <el-select v-model="lessionForm.weekday" placeholder="请选择星期" disabled>
            <el-option v-for="item in weekOption" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程名称" prop="classname">
          <el-input type="text" placeholder="请输入课程名称" v-model="lessionForm.classname"></el-input>
        </el-form-item>
        <el-form-item label="课程时间" prop="time">
          <el-time-picker is-range v-model="lessionForm.time" range-separator="~" start-placeholder="开始时间" :editable="false"
            end-placeholder="结束时间" placeholder="选择时间范围" value-format="HH:mm" :picker-options="{format:'HH:mm'}">
          </el-time-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addClassVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSave">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="stuListType=='adjust'?'调整学生':'查看学生'" center :visible.sync="changeStuVisible" width="50%">
      <template v-if="stuListType=='look'">
        <div class="flex flex-start" style="padding-bottom:10px" v-for="(stu, n) in classStuList" :label="stu.paymentid"
          :key="n">
          <el-avatar size="medium" :src="$Url + '/upload/' + stu.headimg"></el-avatar>
          <div class="font16 p-l-20">{{stu.stuname}} {{stu.phone}}</div>
          <i class="el-icon-finished color-r font18 point" style="margin-left:50px" @click="sing(stu)"></i>
        </div>
      </template>

      <el-checkbox-group v-else size="medium" v-model="checkList" style="max-height:400px;overflow: auto" @change="adjustStu">
        <el-checkbox v-for="(stu, n) in classStuList" :label="stu.paymentid" :key="n" style="padding-bottom:10px">
          <div class="flex flex-start">
            <el-avatar size="medium" :src="$Url + '/upload/' + stu.headimg"></el-avatar>
            <div class="font16 p-l-20">{{stu.stuname}} {{stu.stuphone}}</div>
          </div>
        </el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeStuVisible = false">返 回</el-button>
        <el-button type="primary" @click="changeStuSave" v-if="stuListType=='adjust'">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="'点到：'+singStuInfo.stuname" center :visible.sync="singVisible" width="50%">
      <el-form :model="singForm" ref="RefAddOrEditForm" :rules="rule" label-width="100px" class="edit-form"
        label-suffix="：">
        <el-form-item label="类型" prop="status">
          <el-radio-group v-model="singForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">请假</el-radio>
            <el-radio :label="3">补课</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" placeholder="请输入内容" v-model="singForm.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="singVisible = false">取 消</el-button>
        <el-button type="primary" @click="singSave">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
           
<script>
import checkEmp from "@/views/components/checkEmp";
import {delclass, findEmpClass, addclass, findClassStu, updateClassStu, h5doSign, dosign, sendDXtoClassStu } from "@/api/user";

export default {
  components: {
    checkEmp,
  },
  data() {
    return {
      activeNames: [0],
      tableData: [],
      stuListType: 'adjust',
      classStuList: [],
      checkList: [],
      operItem: '',
      singStuInfo: {},
      operEmpid: '',
      searchForm: {
        empid: ''
      },
      cardBody: {
        minHeight: '300px',
        maxHeight: '800px',
        overflow: 'auto'
      },
      changeStuVisible: false,
      addClassVisible: false,
      singVisible: false,
      lessionForm: {
        weekday: '',
        classname: '',
        time: ''
      },
      singForm: {
        status: 1,
        content: ''
      },
      rule: {
        weekday: [
          { required: true, message: '必须选择星期', trigger: 'change' }
        ],
        classname: [
          { required: true, message: '必须填写课程名称', trigger: 'change' }
        ],
        time: [
          { required: true, message: '必须选择课程时间', trigger: 'change' }
        ]
      },
      weekOption: [
        {
          label: '星期一',
          value: 1
        },
        {
          label: '星期二',
          value: 2
        },
        {
          label: '星期三',
          value: 3
        },
        {
          label: '星期四',
          value: 4
        },
        {
          label: '星期五',
          value: 5
        },
        {
          label: '星期六',
          value: 6
        },
        {
          label: '星期日',
          value: 7
        }
      ],

    }
  },
  mounted() {
    this.getData()
  },
  computed: {
    addLessionData() {
      const { weekday, classname, time } = this.lessionForm
      return {
        empid: this.operEmpid,
        weekday,
        classname,
        starttime: time ? time[0] : '',
        endtime: time ? time[1] : ''
      }
    }
  },
  methods: {
    addData(weekday) {
      this.addClassVisible = true
      this.lessionForm = {
        weekday: weekday,
        classname: '',
        time: [new Date(2021, 1, 1, 0, 0), new Date(2021, 1, 1, 23, 59)]
      }
    },
    adjustStu(val) {
      if (val.length > 0) {
        this.checkList = val.filter(e => {
          if (e>0) {
            return e
          }
        })
        console.log(this.checkList);
      } else {
        this.checkList = []
      }
    },
    addSave() {
      this.$refs.addLessionRef.validate(async (valid) => {
        if (valid) {
          const res = await addclass.post(this.addLessionData);
          if (res.resultCode === "000000") {
            console.log(res);
            this.addClassVisible = false
            this.$message.success(res.resultInfo);
            this.getData()
          } else {
            this.$message.error(res.resultInfo);
          }
        }
      })


    },
    lookInfo(item) {
      this.classStuList = []
      console.log(item, 555);
      this.stuListType = 'look'
      this.classStuList = item.stuClassList;
      this.changeStuVisible = true
    },
    async sendMsg(val){
      const res = await sendDXtoClassStu.post({classid: val.classid})
      if (res.resultCode === "000000") {
        this.$message.success(res.resultInfo);
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    handleClick() { },
    async changeStu(val) {
      this.classStuList = []
      this.checkList = []
      this.stuListType = 'adjust'
      this.operItem = val
      const param = {
        classid: val.classid,
        empid: val.empid
      }
      const res = await findClassStu.post(param);
      if (res.resultCode === "000000") {
        this.classStuList = res.data;
        this.classStuList.forEach(e => {
          if (e.checked) {
           this.checkList.push(e.paymentid) 
          }
        })
        this.changeStuVisible = true
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    async changeStuSave() {
      const prams = { classid: this.operItem.classid, paymentids: this.checkList }
      const res = await updateClassStu.post(prams);
      if (res.resultCode === "000000") {
        this.changeStuVisible = false
        this.$message.success(res.resultInfo);
        this.getData()
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    sing(val) {
      // paymentid
      this.singStuInfo = val
      this.singVisible = true
    },
    async singSave() {
      const param = {
        paymentids: [this.singStuInfo.paymentid],
        status: this.singForm.status,
        content: this.singForm.content
      }
      const res = await dosign.post(param);
      if (res.resultCode === "000000") {
        this.$message.success(res.resultInfo);
        this.singVisible = false
        this.getData()
      } else {
        this.$message.error(res.resultInfo);
      }
      this.getData()
    },
    classdel(id) {
      this.$confirm("此操作将删除该项目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.delClassItem(id)
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async delClassItem(id){
      const res = await delclass.post({classid: id});
      if (res.resultCode === "000000") {
        this.$message.success(res.resultInfo);
        this.getData()
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    async getData() {
      this.operEmpid = this.searchForm.empid
      const res = await findEmpClass.post(this.searchForm);
      if (res.resultCode === "000000") {
        console.log(res);
        this.tableData = res.data
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    searchCheckedEmp(val) {
      this.operEmpid = val
      this.searchForm.empid = val
    },
  }
}
</script>
<style lang='scss'>
.class-plain {
  .el-date-editor--timerange.el-input__inner {
    width: 100%;
  }
  .el-checkbox-group {
    .el-checkbox {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
  .el-dialog--center .el-dialog__body {
  }
}
.el-card__body {
  padding: 5px;
  .item-box{
    position: relative;
    border-bottom: 1px dashed #999;
    padding: 20px 0;
    overflow: hidden;
    .del-icon{
      position: absolute;
      top: 2px;
      right: 2px;
    }
    .del-bg{
      position: absolute;
      top: -25px;
      right: -25px;
      background-color: #c4c4c4;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .himg-box{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      width: 100%;
    }
  }

}
.classTab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .box-card {
    margin-right: 0px;
    margin-bottom: 20px;
    width: 14%;
  }
}
</style>